a { text-decoration: none; color: inherit; }
 
body {
    background: #FEFFFD url(img/mol.jpg) no-repeat top left;
    font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
}

#head {
    margin: 20px 0 0 0;
    width: 200px;
    float: left;
    border: 1px solid #828573;
    border-left: none;
    border-radius: 0 20px 20px 0;
    text-align: center;
    color: #394530;
    background: rgba(244, 245, 242, .9);
}

#site {
    margin: 0 5px 10px;
    padding: 10px 0;
    border-bottom: 1px dotted #55636F;
}

h1 {
    font-family: 'Syncopate', serif;
    font-size: 2.7em;    
    font-weight: bold;
    text-shadow: 0 0 30px #FFFFFF;
    color: #215416;
}

#site h1:hover {
    text-shadow: 0 0 20px #B6E9BF;
}

#site p {
    font-size: .7em;
}

#nav ul {
    margin: 0 0 25px;
    border-bottom: 1px solid #8F8F84;
}

#nav ul ul {
    margin: 0;
    border: none;
    display: none;
}

#nav li.extra {
    float: left;
    margin: 0 0 10px; 
    width: 50%;
}

#nav li.extra a:hover {
    text-decoration: underline;
}

#nav li.tool {
    clear: left;
    display: block;
    padding: 2px 10px;
    border-top: 1px solid #A4A498;
}

#nav li.tool:hover {
    background: #62869E;
    color: #FEFFFD;
}

#nav li.tool:hover strong {
    font-weight: bold;
}

#nav li.programs {
    clear: left;
    display: block;
    border-top: 1px solid #8F8F84;
}

#nav li.programs > a {
    display: block;
    padding: 10px 0 0;
    margin: 10px 0 0;
    font-family: 'Syncopate', serif;
    font-size: 1.5em;
}

#nav li.extra + li.programs > a {
    margin: 0;
}

#nav li.tool strong {
    display: block;
    padding: 5px 0 0;
    font-family: 'Syncopate', serif;
    font-size: 1.25em;
}

#nav li.tool .summary {
    display: block;
    font-size: .7em;
}

#msroll #nav-msroll,
#rcoal #nav-rcoal,
#best #nav-best {
    background: rgba(254, 255, 253, 0.93);
    position: relative;
    width: 180px;
    padding: 5px 40px 5px 10px;
    margin: 0 0 -1px 0;
    border-bottom: 1px solid #A4A498;
}

#msroll #nav-hydrodynamics ul,
#rcoal #nav-hydrodynamics ul,
#best #nav-hydrodynamics ul {
    display: block;
}

#msroll #nav-hydrodynamics > a,
#rcoal #nav-hydrodynamics > a,
#best #nav-hydrodynamics > a {
    text-shadow: 0 0 20px #B6E9BF;
}

#msroll #nav-msroll:hover,
#rcoal #nav-rcoal:hover,
#best #nav-best:hover {
    color: #394530;
}

#msroll #nav-msroll:hover strong,
#rcoal #nav-rcoal:hover strong,
#best #nav-best:hover strong {
    font-weight: normal;
}

#status {
    float: right;
    margin: 0 0 20px;
    border: 1px solid #828573;
    border-top: none;
    border-right: none;
    border-radius: 0 0 0 20px;
    background: url(img/wave.png) repeat-x center center;
}

#status .clear {
    clear: both;
}

#user {
    float: right;
    margin: 0 0 0 10px;
    padding: 5px;
    position: relative;
    min-width: 8em;
    text-align: right;
}

#user fieldset {
    min-height: 0;
}

.not #user {
    margin: 0 0 0 15px;
    padding: 0 10px 0 0;
}

#user:after {
    content: "\25BC";
}

.not #user:after {
    content: none;
}

#about {
    width: 50%;
    float: left;
}

#about h1 {
    font-size: 1.5em;
    letter-spacing: .1em;
    float: left;
    padding: 0 1em;
}

#about h1 span {
    display: block;
}

#about h1 span:first-letter {
    display: block;
    float: left;
    width: 1.5em;
    text-align: center;
    font-weight: bold;
}

#about p {
    line-height: 1.1;
    margin: 0 1em 1em;
}

#recent-activity {
    width: 46%;
    float: right;
    background: rgba(217, 205, 195, .15);
    padding: 15px 2%;
    min-height: 520px;
    border-radius: 20px;
}

#recent-activity h1 {
    border-bottom: 1px solid #A4A498;
    text-align: center;
}

h2 {
    font-size: 1.1em;
    padding: .5em 0; 
}

.list {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #CCCCBD;
}

.list td, .list th {
    text-align: left;
}

.list th {
    padding: 5px;
}

.list tr {
    border: 1px solid #CCCCBD;
}

.list tr:nth-child(even) td {
    background: rgba(217, 205, 195, .15);
}

.list tr:hover td {
    background: #FEFFFD;
}

.list td a {
    display: block;
    padding: 5px;
}

.job-list .tool {
    width: 6em;
}

.list .date {
    text-align: right;
}


#user .username {
    margin: 0 0 0 10px;
    padding: 0 0 0 10px;
    border-left: 1px solid #666666;
}

.working-project {
    color: #444444;
}

.working-project a {
    color: #000000;
}

#user ul {
    display: none;
    margin: 5px 0 0;
    padding: 0 0 10px 0;
    position: absolute;
    right: 0;
    border: 1px solid #828573;
    border-top: none;
    border-right: none;
    border-radius: 0 0 0 20px;
    background: #AFAFAF;
    font-size: .9em;
    text-align: left;
}

#user:hover ul {
    display: block;
}

#user ul li:first-child a {
    border: none;
}

#user ul li a {
    display: block;
    margin: 0 10px;
    padding: 3px 5px;
    border-top: 1px solid #A4A498;
}

#user ul li a:hover {
    text-decoration: underline;
}

#system {
    float: left;
}

#system .label {
    display: block;
    float: left;
    padding: 5px 10px 5px 10px;
    
    
}

#system .status {
    display: block;
    float: left;
    border-right: 1px solid #666666;
    border-radius: 0 0 0 20px;
    padding: 5px 20px;
    width: 8em;
    text-align: center;
}

#system .status.none {
    background: #95B9CC;
}

#system .status.low {
    background: #8DB570;
}

#system .status.medium {
    background: #EDAC61;
}

#system .status.high {
    background: #F08F9A;
}

#system .status.max {
    background: #751115;
    color: #EDEDEB;
}

#main { 
    margin: 0 0 25px 230px;
    padding: 20px;
    clear: right;
    min-height: 550px;
    max-width: 850px;
    border-radius: 20px 0 0 0;
    background: rgba(254, 255, 253, 0.93);
}

#main:after { 
    clear: both;
    content: ".";
    visibility: hidden;
    display: block;
}

#main h1 {
    font-variant: small-caps;
}

#main a {
    text-decoration: underline;
}

#user-authenticate {
    padding: 0;
    font-size: .8em;
}

#user-authenticate fieldset {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
}

#user-authenticate legend {
    display: none;
}

#user-authenticate .text {
    display: none;
}

form {
    padding: 1em;
}

fieldset {
    margin: .5em ;
    
    padding: 0;
    border: 1px solid #828573;
    border-radius: 10px;
    min-height: 100px;
}

fieldset.tool.parameters {
    padding: .5em 1em;
    min-height: 0;
}

fieldset.parameters .options {
    padding: .5em 1em 0;
}

legend {
    margin: 0 1em;
    font-size: 1.2em;
}

.field {
    margin: 0 .5em ;
}

.meta.field {
    float: left;
}

.meta.toggle input {
    margin: 7px 0 0 1.5em;
}

.meta label {
    display: block;
}

.field label {
    font-size:.7em;
}

.field select {
    display: block;
}

.method-selection {
    padding: 0;
    float: right;
    border-left: 1px solid #EEEEEE;
    height: 75px;
}

.options {
    border-top: 1px dotted #828573;
    border: none;
}

.existing.options label {
    margin: 1em 0;
}

.library.options label {
    margin: .5em 0 0;
}

.library.options .note {
    margin: 0 0 0 2em;
}

.default.options p {
    margin: 1em .5em 0;
}

.method-selection input {
    float: left;
    clear: left;
    margin: 6px 5px 3px 5px;
}

.method-selection label {
    color: #AFAFAF;
    display: block;
    width: 15em;
    padding: 3px 0 6px 0;
    cursor: pointer;
}

.method-selection label:hover {
    color: #828573;
}

.method-selection :checked + label {
    color: #000000;
    background: #F3F4F0;
}

.note {
    font-size: .8em;
}

.options label {
    display: block;
    padding: .2em 0;
}

input {
    border: 1px solid #828573;
    background: #FEFFFD;
    padding: 2px;
}

input:focus {
    border: 1px solid #828573;
    outline: none;
}

.controls {
    float: right;
}

.parameters {
    clear: right;
}

.controls input, input[type=submit] {
    padding: 1px 5px;
    border-radius: 10px;
    background: url(img/dark-wave.png) repeat-x center center;
    cursor: pointer;
}

.controls input {
    font-size: 1em;
    font-weight: bold;
    padding: 10px 15px;
}

.controls input:hover, input[type=submit]:hover {
    background: url(img/wave.png) repeat-x center center;
}


.controls input:disabled {
    cursor: default;
    opacity: .5;
}

select {
    border: 1px solid #828573;
    padding: 2px;
    background: #FFFFFF;
}

select:disabled {
    background: #EBEBE4;
}

label.not, input.not {
    display: none;
}

option.placeholder {
    color: #AAAAAA;
}

label.slider {
    clear: right;
    padding: .25em 0;
    display: block;
}

label.slider .text {
    display: block;
    float: left;
    width: 7.5em;
    text-align: right;
}

.slider input {
    text-align: right;
    font-size: 1em;
    clear: right;
    margin: -5px 5px 0 15px;
    font-size: .8em;
    width: 50px;
}

label.slider div.slider {
    width: 564px;
    float: right;
    margin: 3px 0 0;
}

.slider .ui-widget-content,
.rangeslider .ui-widget-content {
    background: url(img/light-wave.png) repeat-x center right;
}

#main .slider .ui-state-default, 
#main .slider .ui-widget-content .ui-state-default, 
#main .slider .ui-widget-header .ui-state-default {
    background: rgba(20, 20, 20, 0.5);
    background: url(img/dark-wave.png) repeat-x 50% 50%;
}

#main .rangeslider .slider .ui-state-default, 
#main .rangeslider .slider .ui-widget-content .ui-state-default, 
#main .rangeslider .slider .ui-widget-header .ui-state-default {
    background: #FDF5CE url(ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png) repeat-x scroll 50% 50%;
}

.store-fields {
    font-size: .75em;
    margin: 0 0 0 2em;
}

.store-fields label {
    display: inline;
}

.rangeslider {
    padding: 5px 0;
}

.rangeslider .text {
    display: block;
    float: left;
    width: 7.5em;
    text-align:right;
}

.rangeslider label .text {
    display: none;
}

.rangeslider .min {
    text-align: right;
    margin-left: 6px;
}

.rangeslider .max {
    float: right;
    text-align: right;
    padding-right: 0;
    margin-right: 0;
}

.rangeslider label {
    position: relative;
    top: -3px;
    padding: 0 5px;
}

.rangeslider div.slider {
    float: right;
    width: 497px;
    margin: 0 7px 0 0;
    position: relative;
    top: 3px;
}

.rangeslider .ui-widget-header {
    background: url(img/dark-wave.png) repeat-x left -45px;
}
 
.ui-button { margin-left: -1px; }
.ui-button-icon-only .ui-button-text { padding: 0.35em; } 
.ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }

.autocomplete-browser {
    padding: 1px;
    height: 1.2em;
    position: relative;
    border: 1px solid #828573;
    background: #FEFFFD;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}

#main .autocomplete-browser input {
    border: none;
    padding: 0 3.5em 0 0;
    background: transparent;
    width: 15em;
}

#main .options .autocomplete-browser {
    margin: -3px 0 0;
}

#main .options .autocomplete-browser input {
    width: 20em;
}

#main .autocomplete-browser a {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
    line-height: 1;
    vertical-align: middle;
    text-decoration: none;
    color: #828573;
}

#main .autocomplete-browser a span {
    font-size: .8em;
    padding: 0 .25em;
}

#main .autocomplete-browser a:hover {
    color: #215416;
}

.autocomplete-browser.disabled, input:disabled {
    background: #EBEBE4;
}

.autocomplete-browser.disabled a {
    cursor: default;
}

#main .autocomplete-browser.disabled a:hover, label.disabled {
    color: #828573;
}

abbr.units {
    font-size: .7em;
    vertical-align: super;
}

code {
    font-family: monospace;
}

#best-parameters > div {
    display: inline;
}

fieldset .ui-button .ui-button-text {
    font-weight: normal;
    font-size: .8em;
    padding: .2em .5em .2em 2em;
}

fieldset .ui-button .ui-icon {
    background-image: url(ui-lightness/images/ui-icons_222222_256x240.png);
    opacity: .25;
}

fieldset .ui-button.ui-state-active .ui-icon {
    background-image: url(ui-lightness/images/ui-icons_ef8c08_256x240.png);
    opacity: 1;
}

.result-parameters {
    margin: 20px 10px;
    float: left;
    border: 1px solid #828573;
    padding: 6px;
    width: 400px;
}

.result-parameters th {
    text-align: center;
    font-family: 'Syncopate', serif;
    font-weight: bold;
    text-shadow: 0 0 30px #FFFFFF;
    color: #215416;
}

.output-file-box {
    font-size: 1.2em;
    font-weight: bold;
    padding: 13px 15px;
    margin-left: 10px;
    float: left;
    border: 1px solid #828573;
    width: automatic;
}

.log-file-box {
    margin: 20px 10px;
    float: right;
    font-family: monospace;
    border: 1px solid #828573;
    background: rgba(255, 255, 255, .8);
    padding: 6px;
    width: 375px;
    height: 610px;
    overflow-y: scroll;
}

.output-image-box {
    margin: 20px 10px;
    float: left;
    font-family: monospace;
    border: 1px solid #828573;
    padding: 6px;
    width: automatic;
}

.warning .ui-icon {
    display: inline;
    margin: 0 5px;
}

.warning strong {
    margin: 0 0 0 -5em;
}

.warning {
    clear: right;
    padding: 5px 0 5px 6em;
    margin: 5px 200px 5px 5px;
    border-radius: 5px;
}

.warning strong {
    font-weight: bold;
}
